<%@ include file="/view/template/header.jsp"%>	
	<div id="content">
		<%@ include file="/view/admin/admin_common.jsp"%>
        <div class="right-content">
			<div class="box">
				<div class="con-part" >
					<h3>
						<c:if test="${param.message !=null }">
							<%out.print(request.getParameter("message"));%>
						</c:if>
					</h3>
				</div>
				<div class="clear"></div>
				<h1>
					<s:label key="label.admin.create_users" cssClass="label_text"></s:label>
				</h1>
				<div class="sub_box">
					<form id="create_users_form" method="post">
						<div class="con-part">
							<span>
								<s:label key="label.user.username" cssClass="label_text"></s:label>
								<img name="required" src="<% out.print(baseURL);%>/view/required.jpg" width="15" height="20" alt="required" />
							</span> 
							<input id="username" name="username" class="input_text"/>
						</div>
						<div class="con-part">
							<span>
								<s:label key="label.user.name" cssClass="label_text"></s:label>
								<img name="required" src="<% out.print(baseURL);%>/view/required.jpg" width="15" height="20" alt="required" />
							</span> 
							<input id="name" name="name" class="input_text"/> 
						</div>
						<div class="con-part">
							<span>
								<s:label key="label.user.password" cssClass="label_text"></s:label> 
								<img name="required" src="<% out.print(baseURL);%>/view/required.jpg" width="15" height="20" alt="required" />
							</span>
							<input id="password" name="password" type="password" class="input_text"/>
						</div>
						<div class="con-part">
							<span>
								<s:label key="label.user.confirmPassword" cssClass="label_text"></s:label>
								<img name="required" src="<% out.print(baseURL);%>/view/required.jpg" width="15" height="20" alt="required" />
						 	</span>
							<input id="confirmPassword" name="confirmPassword" type="password" class="input_text"/>
						</div>
						<div class="con-part">
							<span>
								<s:label key="label.user.email" cssClass="label_text"></s:label>
								<img name="required" src="<% out.print(baseURL);%>/view/required.jpg" width="15" height="20" alt="required" />
							 </span>
							<input id="email" name="email" class="input_text"/>
						</div>
						<div class="con-part">
							<span>
								<s:label key="label.user.department" cssClass="label_text"></s:label> 
								<img name="required" src="<% out.print(baseURL);%>/view/required.jpg" width="15" height="20" alt="required" />
							</span>
						 	<input id="department" name="department" class="input-text" /> 
						</div>	
						<div class="con-part">
							<span>&nbsp;</span> <!-- <input type="submit"  value="Search" class="green"/> -->
							<s:submit key="label.admin.create_users" cssClass="green" />
						</div>
					</form>
				</div>
			</div>
		</div>
    </div>
	<%@ include file="/view/template/footer.jsp"%>
	
	<script>
	$(document).ready(function(){

        var x=$("#create_users_form").validate({
            rules: {
            username: {
                required: true,
                minlength: 5,
                maxlength: 50,
                
               
            },
            name: {
                required: true,
                maxlength: 50,
                lettersonly: true
            },
            password: {
                    required: true,
                    minlength: 8,
                    maxlength: 50
                },
            confirmPassword: {
                    required: true,
                    minlength: 8,
                    equalTo: "#password",
                    maxlength: 50
                },
            email: {
                    required: true,
                    email: true,
                    maxlength: 50
                },
                captureCode: "required",
               
               
                
                department: {
                    required: true,
                    
                },
                
            },
           
            messages: {
                username: {
                    required: "Username Required",
                    minlength: "At least 5 characters long"
                },
                last_name: {
                    required: "Name Required",
                    minlength: "At least 3 characters long"
                },
                password: {
                    required: "Password Required",
                    minlength: "Your password must be at least 8 characters long"
                },
                password_confirm: {
                    required: "Password Confirmation Required",
                    minlength: "Your password must be at least 8 characters long",
                    equalTo: "Please enter the same password as above"
                },
                email: "Please enter a valid email address",
               
                
                department: {
                    required: "Department/Ward Required",
                },
            }
        });
        //return x.form();
    });
   
   
    jQuery.validator.addMethod("lettersonly", function(value, element) {
        return this.optional(element) || /^[a-z]+$/i.test(value);
      }, "Letters only please");
   
    $.validator.addMethod("custom_number", function(value, element) {
        return this.optional(element) || value === "NA" ||
            value.match(/^[0-9,\+-]+$/);
    }, "Please enter a valid number, or 'NA'");
  </script>
